<template>
  <div class="container py-5">
    <!-- 新闻列表标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="fw-bold">最新资讯</h2>
      <router-link to="/all-news" class="btn btn-outline-primary">
        查看更多 <i class="bi bi-arrow-right ms-1"></i>
      </router-link>
    </div>

    <!-- 新闻列表 -->
    <div class="news-container">
      <div
        class="news-item mb-4"
        v-for="item in newsList"
        :key="item.id"
        @click="viewNewsDetail(item.id)"
      >
        <div class="row g-0">
          <!-- 日期部分 -->
          <div class="col-md-2 col-3">
            <div class="date-box text-center p-2 h-100">
              <div class="year-month bg-light rounded-top p-1">
                {{ item.date.yearMonth }}
              </div>
              <div
                class="day bg-primary text-white rounded-bottom p-2 fs-3 fw-bold"
              >
                {{ item.date.day }}
              </div>
            </div>
          </div>

          <!-- 内容部分 -->
          <div class="col-md-10 col-9 ps-3">
            <div class="news-content h-100 d-flex flex-column">
              <h5 class="news-title clamp-text fw-bold mb-2">
                {{ item.title }}
              </h5>
              <p class="summary clamp-text text-muted flex-grow-1">
                {{ item.summary }}
              </p>
              <div class="mt-auto">
                <span
                  class="badge bg-secondary me-2"
                  v-for="tag in item.tags"
                  :key="tag"
                  >{{ tag }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

// 使用 Vue Router
const router = useRouter();

// 模拟新闻数据
const newsList = ref([
  {
    id: 1,
    date: {
      yearMonth: "2024-05",
      day: "15",
    },
    title: "Vue 3.4 正式发布，性能提升显著",
    summary:
      'Vue 3.4 "Slam Dunk" 版本带来多项性能优化和开发者体验改进，包括模板解析速度提升、响应式系统优化等。',
    tags: ["前端", "Vue"],
    content: "详细内容...",
  },
  {
    id: 2,
    date: {
      yearMonth: "2024-04",
      day: "28",
    },
    title: "Bootstrap 5.3 新增暗黑模式支持",
    summary:
      "最新版本的Bootstrap框架原生支持暗黑模式，提供更加灵活的主题定制能力，同时优化了响应式设计。",
    tags: ["CSS框架", "响应式"],
    content: "详细内容...",
  },
  {
    id: 3,
    date: {
      yearMonth: "2024-04",
      day: "18",
    },
    title: "TypeScript 5.4 发布，新增多项实用功能",
    summary:
      "TypeScript 5.4 版本引入了全新的类型推断改进和语法糖，帮助开发者编写更类型安全的代码。",
    tags: ["JavaScript", "类型安全"],
    content: "详细内容...",
  },
  {
    id: 4,
    date: {
      yearMonth: "2024-04",
      day: "05",
    },
    title: "前端工程化新趋势：Vite 4.0 深度解析",
    summary:
      "Vite 4.0 带来了更快的冷启动速度和更高效的热更新机制，成为现代前端开发的首选构建工具。",
    tags: ["构建工具", "性能优化"],
    content: "详细内容...",
  },
]);

// 查看新闻详情
const viewNewsDetail = (id) => {
  router.push(`/news/${id}`);
};
</script>

<style scoped>
.news-container {
  max-width: 800px;
  margin: 0 auto;
}

.news-item {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.date-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.year-month {
  font-size: 0.9rem;
  font-weight: 500;
}

.day {
  line-height: 1;
}

.news-content {
  padding: 1rem 0;
}

.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-title {
  -webkit-line-clamp: 2;
  line-height: 1.4;
  min-height: 3.5rem;
}

.summary {
  -webkit-line-clamp: 2;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .date-box {
    max-width: 70px;
  }

  .news-title {
    font-size: 1.05rem;
  }

  .day {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .news-item .col-3 {
    max-width: 70px;
  }

  .news-title {
    -webkit-line-clamp: 3;
    min-height: auto;
  }
}
</style>